<template>

  <div class="home_block">
    <div class="item_halving_line">
      {{ block_title }}
      <slot name="block_top"></slot>
      <el-icon><ArrowRightBold /></el-icon>
    </div>
    <div class="item_content">
      <el-empty description="找不到数据" v-show="item_isEmpty" />
      <item_card_loading  v-if="item_loading" />
      <item_card v-for="item in items" :item="item" />
    </div>
    <slot name="block_footer"></slot>
  </div>

</template>

<script setup>
import { defineProps, ref, toRefs } from "vue";
import Item_card from "@/components/home/item_card.vue";
import {ArrowRightBold} from "@element-plus/icons-vue";
import item_card_loading from '@/components/home/item_card_loading.vue'

const props = defineProps({
  block_title:String
});
const {  block_title  } = toRefs(props);

const item_isEmpty = ref(false)
const item_loading = ref(false)

const items = ref([
  {
    item_title: '文旅ip制作',
    item_content: '冰城非遗',
    img1_src: 'src/components/home/res/item/item_1_1.png',
    img2_src: 'src/components/home/res/item/item_2_1.png',
  },
  {
    item_title: '非遗科普系列',
    item_content: '薪火相传',
    img1_src: 'src/components/home/res/item/item_2_1.png',
    img2_src: 'src/components/home/res/item/item_2_2.png',
  },
  {
    item_title: '节日礼盒盲盒',
    item_content: '集卡送好礼',
    img1_src: 'src/components/home/res/item/item_3_1.png',
    img2_src: 'src/components/home/res/item/item_3_2.png',
  },
  {
    item_title: '顶级馆藏',
    item_content: '高端定制',
    img1_src: 'src/components/home/res/item/item_4_1.png',
    img2_src: 'src/components/home/res/item/item_4_2.png',
  }
])


</script>

<style scoped>
.home_block{
  min-height: 30vh;
  width: 100%;
  transition: all 0.2s ease-in-out;
  margin: 1vh 0 2vh 0;
  cursor: pointer;
  background-color: #fcfcfc;
}
.home_block:hover{
  transform: scale(1.01);
}

.item_halving_line{
  height: 10vh;
  width: 100%;
  font-size: 26px;
  font-family: "Inter", sans-serif;
  padding: 0 2vh 0 2.5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item_content{
  margin: 0;
  padding: 1vh 0 1vh 0;
  min-height: 20vh;
  width: 100%;
  background-color: #f0f0f0;
  display: flex;
  flex-wrap: wrap;
}


</style>